<template>
	<view class="jiudian">
		<text class="jiudian_1">酒店预订</text>
		<view class="jiudian_carp" v-for="(item,index) in hotel">
			<view class="jiudian_carp_left">
				<view style="width: 80%;">
					<view class="_carp_left_1">
						<view class="_carp_left_02 huanhang">{{item.name}}</view>
						<text v-if="item.type==1">三星舒适</text>
						<text v-if="item.type==2">四星高档</text>
						<text v-if="item.type==3">五星豪华</text>
					</view>
					<view class="_carp_left_2 huanhang">
						{{item.address}}
					</view>
					<view class="_carp_left_3">
						<view class="">
							<image class="_carp_left_3_1" src="@/static/img/zb (2).png" />
							<text class="_carp_left_3_2">距离活动会场{{item.distance}}km</text>
						</view>
						<image @click="phone(item.phone)" class="_carp_left_3_3"
							src="https://s4.ax1x.com/2022/01/25/77fxiT.png" />
					</view>
				</view>
			</view>

			<view class="jiudian_carp_right" :style="{
						'background-image': $img(item.logo_image)
				}">
			</view>
		</view>
		<view style="	
		text-align: center;
	   font-size: 24rpx;
	    font-family: Source Han Sans CN;
	  	font-weight: 400;
	   color: #91969A;
	opacity: 1;" @click="curre=2" v-if="curre==1">
			展开
			<u-icon name="arrow-down" />
		</view>
		<view style="	
		text-align: center;
	font-size: 24rpx;
	font-family: Source Han Sans CN;
	font-weight: 400;
	color: #91969A;
	opacity: 1;" @click="curre=1" v-if="curre==2">
			收起
			<u-icon name="arrow-up" />
		</view>

		<text class="jiudian_1">拼车出行</text>
		<view class="chuxing" v-for="(item,index) in carpool">
			<view class="chuxing_1">
				<text class="chuxing_1_1"><text class="dian"></text>{{item.name}}</text>
				<!-- <text class="chuxing_1_1"><text class="dian"></text>郑州</text>
				<image src="@/static/img/jiantou.png" style="width: 88rpx;height: 5rpx;" />
				<text class="chuxing_1_2"><text class="dian"></text>洛阳</text> -->
			</view>
			<image @click="phone(item.phone)" style="width: 50rpx;height: 50rpx;"
				src="https://s4.ax1x.com/2022/01/25/77fxiT.png" />
		</view>
		<view style="margin-top: 20rpx;">
			<view style="
				text-align: center;
			   font-size: 24rpx;
			    font-family: Source Han Sans CN;
			  	font-weight: 400;
			   color: #91969A;
			opacity: 1;" @click="curre1=2" v-if="curre1==1">
				展开
				<u-icon name="arrow-down" />
			</view>
			<view style="	
				text-align: center;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #91969A;
			opacity: 1;" @click="curre1=1" v-if="curre1==2">
				收起
				<u-icon name="arrow-up" />
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		props: ['info'],
		data() {
			return {
				curre1: 1,
				curre: 1
			};
		},
		computed: {
			carpool() {
				let a = null
				if (this.curre1 == 1) {
					if (this.info.carpool.length > 2) {
						a = this.info.carpool.slice(0, 2)
					} else {
						a = this.info.carpool
					}
				} else {
					a = this.info.carpool
				}
				return a
			},
			hotel() {
				let a = null
				if (this.curre == 1) {
					if (this.info.hotel.length > 2) {
						a = this.info.hotel.slice(0, 2)
					} else {
						a = this.info.hotel
					}
				} else {
					a = this.info.hotel
				}
				return a
			},
		},
		methods: {
			phone(a) {
				uni.makePhoneCall({
					phoneNumber: a //仅为示例
				})
			},
		}
	}
</script>

<style lang="scss">
	.huanhang {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.jiudian {
		padding: 30rpx;

		.chuxing {
			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx 20rpx 20rpx 40rpx;
			border-bottom: 1rpx solid $u-border-color;
			border-left: 1rpx solid $u-border-color;
			box-shadow: 0px 6rpx 10rpx rgba(0, 0, 0, 0.06);

			.chuxing_1 {
				width: 45%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.chuxing_1_2 {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
					opacity: 1;

					.dian {
						margin-right: 10rpx;
						display: inline-block;
						width: 12rpx;
						height: 12rpx;
						background: #FF2424;
						border-radius: 50%;
						opacity: 1;
					}
				}

				.chuxing_1_1 {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #131314;
					opacity: 1;

					.dian {
						display: inline-block;
						width: 12rpx;
						height: 12rpx;
						margin-right: 10rpx;
						background: #FFD500;
						border-radius: 50%;
						opacity: 1;
					}
				}
			}
		}

		.zk {}

		.jiudian_carp {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;

			.jiudian_carp_right {
				width: 210rpx;
				height: 204rpx;
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.jiudian_carp_left {
				padding: 20rpx 20rpx 20rpx 40rpx;
				border-bottom: 1rpx solid $u-border-color;
				border-left: 1rpx solid $u-border-color;
				box-shadow: 0px 6rpx 10rpx rgba(0, 0, 0, 0.06);
				width: 80%;

				._carp_left_3 {
					display: flex;
					justify-content: space-between;
					align-items: center;

					._carp_left_3_1 {
						width: 25.72rpx;
						height: 25.72rpx;
					}

					._carp_left_3_3 {
						width: 50rpx;
						height: 50rpx;
					}

					._carp_left_3_2 {
						margin-left: 10rpx;
						font-size: 22rpx;
						font-family: HarmonyOS Sans;
						font-weight: 400;
						color: #91969A;
						opacity: 1;
					}
				}

				._carp_left_2 {
					width: 120%;
					// border: 1rpx solid black;
					margin: 15rpx 0 20rpx 0;
					font-size: 25rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #131314;
					opacity: 1;
				}

				._carp_left_1 {
					display: flex;
					justify-content: space-between;

					._carp_left_02 {
						width: 63%;
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: bold;
						color: #131314;
						opacity: 1;
					}

					text:nth-of-type(1) {
						display: inline-block;
						height: 40rpx;
						line-height: 40rpx;
						text-align: center;
						padding: 0rpx 5rpx 0rpx 5rpx;
						font-size: 22rpx;
						font-family: Source Han Sans SC;
						font-weight: 400;
						color: #FF2424;
						opacity: 1;
						border: 1rpx solid #FF2424;
						opacity: 1;
						border-radius: 2rpx;
					}
				}
			}
		}

		.jiudian_1 {
			display: inline-block;
			margin: 20rpx 0 40rpx 0;
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #333333;
			opacity: 1;
		}
	}
</style>
